<template>
    <div class="notice-module">
        <div class="head">
            <div class="left">
                通知列表
            </div>
            <div class="right">
                <el-button type="primary" @click="readAll">全部已读</el-button>
            </div>
        </div>
        <div class="data_list" @scroll="handleScroll">
            <div class="item" v-for="item in dataList" @click="viewDetail(item.id)">
                <div class="title">{{ item.title }}  <span class="unread-dot" v-if="!item.user_id"></span></div>
                <div class="attr">赛事：{{ item.matchName }}</div>
                <div class="attr">发布时间：{{ item.create_date }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, defineComponent } from "vue";
import listService from "@/utils/listServiceWap";
import router from "@/router";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
import { getCache } from "@/utils/cache";



export default defineComponent({
    setup() {
        const state = reactive({
            getDataListURL: "/front/notice/page?pageSize=10&type=1",
            getDataListIsPage: true,
            deleteURL: "/pay/order",
            deleteIsBatch: true,
            dataForm: {
                id: null,
                status: "",
                name: "",
                title: "",
                content: "",
            }
        });
        return { ...listService(state), ...toRefs(state) };
    },

    data() {
        return {
            isCollapse: 1,
            dialogVisible: false,
            isNavCollapse: false,
            evaluationDialogFlag: false,
            updateForm: {
                id: null,
                schoolName: '',
                evaluation: ''
            },
            formLabelWidth: '120px',
            userInfo: "",
            timer:0,
            scrollItem: { clientHeight: 0, scrollTop: 0, scrollHeight: 0 }
        };
    },

    mounted() {
        this.userInfo = getCache('userInfo', { isSessionStorage: true }, {});
        this.scrollItem = document.querySelector(".data_list")!;
    },

    methods: {
        viewDetail(id: any) {
            router.push({ path: "/wap/notice/detail_info", query: { id: id } });
        },
        handleScroll() {

            if (this.scrollItem.clientHeight + this.scrollItem.scrollTop > (this.scrollItem.scrollHeight - 100)) {
                clearTimeout(this.timer);
                // 设置新的定时器，延迟执行逻辑
                this.timer = setTimeout(() => {
                    ++this.page!;
                    this.query();
                }, 50);

            }

        },

        /**
         * 全部已读
         */
        readAll() {
            baseService.get("/front/notice/readAll").then((res) => {
                if (res.code === 0) {
                    this.page = 1;
                    this.query();
                    ElMessage.success('全部已读');
                } else {
                    ElMessage.error(res.msg);
                }
            });
        }
    }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "./style.scss";
</style>
